<template>
    <div>
        <el-row>
        <el-button type="primary">设为热门</el-button>
        <el-button type="info">取消热门</el-button>
        <el-button type="primary" :disabled="single" @click="handleUpdate">修改</el-button>
        <el-button type="danger" :disabled="multiple">删除</el-button>
        </el-row>
    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="用户名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="type"
      label="类别"
      width="55">
    </el-table-column>
    <el-table-column
      prop="Hot"
      label="热门"
      width="55"
    >
    </el-table-column>
    <el-table-column
      prop="state"
      label="状态"
      sortable
      width="120">
    </el-table-column>
    <el-table-column
      prop="value"
      label="简要"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        </template>
    </el-table-column>
  </el-table>
  <!-- 修改框 -->
  <el-dialog title="修改信息" :visible.sync="open" :append-to-body="true" width="500px">
    <el-from label-width="80px" ref="tableData" :model="tableData">
      <el-from-item label="日期" prop="date">
        <el-input v-model="tableData.date" />
      </el-from-item>
      <el-from-item label="用户名" prop="name">
        <el-input  v-model="tableData.name" />
      </el-from-item>
      <el-from-item label="类别" prop="type">
        <el-input  v-model="tableData.type" />
      </el-from-item>
      <el-from-item label="热门" prop="Hot">
        <el-input  v-model="tableData.Hot" />
      </el-from-item>
      <el-from-item label="状态" prop="state">
        <el-input  v-model="tableData.state" />
      </el-from-item>
      <el-from-item label="简要" prop="value">
        <el-input  v-model="tableData.value" />
      </el-from-item>
    </el-from>
    <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="sumbitForm">确 定</el-button>
  </div>
  </el-dialog>
    </div>
</template>
<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2020-08-23',
        name: 'admin',
        type: 'Vue',
        state: '审核通过',
        Hot: '是',
        value: '关于vue的组件推荐'
      }],
      open: false,
      form: {},
      single: true,
      multiple: true
      // from: {}
    }
  },
  methods: {
    handleClick (row) {
      this.$alert('<li>日期: </li>' + row.date + '<li>姓名: </li>' + row.name + '<li>类别: </li>' + row.type + '<li>热门: </li>' + row.Hot + '<li>状况: </li>' + row.state + '<li>简要： </li>' + row.value, '查看基本信息', {
        dangerouslyUseHTMLString: true,
        center: true,
        confirmButtonText: '确定'
      })
    },
    handleUpdate () {
      this.open = true
    },
    cancel () {
      this.open = false
    },
    submitFrom () {
      this.open = false
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      // this.ids = selection.map(item => item.postId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    }
    // show (index) {
    //     this.$Modal.info({
    //         title: 'User Info',
    //         content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
    //     })
    // },
    // remove (index) {
    //   this.data1.splice(index, 1)
    // }
  }
}
</script>
